The ::selection pseudo-element in CSS allows you to style the portion of text that a user highlights (selects) with their cursor. It provides a way to customize the appearance of selected text, such as changing its background color, text color, or adding other visual effects.

Key Points

1
::selection applies only to the text a user selects.
2
You can style properties like color, background-color, text-shadow, and cursor.
3
Not all CSS properties are supported; mainly visual text properties work.
4
It works on most elements that contain selectable text.

Example: Styling Selected Text

In this example, when the user selects the paragraph text, the background changes to blue, the text color becomes white, and a subtle text shadow is applied, enhancing the visual feedback of text selection.

Best Practices

1
Use ::selection to improve user experience and match your site's color scheme.
2
Keep contrast high for readability when styling selections.
3
Test across different browsers, as some older browsers may have limited support.
4
Avoid adding complex animations or non-text styles, as these are not supported.

Difficulty: 3/10

Topics: CSS pseudo-elements, user selection styling, cross-browser consistency

Scenario Questions

0-2 years experience

1
How would you change the background color of selected text to yellow in a paragraph, and what CSS properties would you avoid using?
2
What happens if you write ::selection { color: red; background: blue; } but the selection doesn’t change—what’s the first thing you’d check?

2-5 years experience

1
Our app has a dark mode theme, and when users highlight text, the selection becomes unreadable—how would you debug and fix this?
2
A designer wants selected text to have a gradient background using ::selection, but it’s not working—why, and what’s your workaround?

5-8 years experience

1
We’re building a rich-text editor and need consistent selection styling across Chrome, Safari, and Firefox—how do you architect this without bloating CSS or causing layout shifts?
2
A third-party library overrides ::selection globally, breaking our UI—how would you isolate or override it without affecting other components?

8+ years experience

1
We’re migrating a legacy UI from IE11 to modern browsers and need to preserve selection styling—how do you handle vendor prefixes and fallbacks at scale without introducing technical debt?
2
How would you design a design system token for selection styling that accommodates accessibility, theming, and cross-platform consistency across web, PWA, and embedded webviews?

Follow-up Questions

❓What happens if you try to set font-size on ::selection?
❓Have you ever seen ::selection break in a dark mode theme?
❓How would you test this across browsers?